<template>
  <!-- 个人资料修改 -->
  <div class="centerInfo">
      <head-usual :title="centerTitle" :to="to"></head-usual>
      <!-- 信息列表 -->
      <ul class="info-list">
   
          <li  @click="switchTarget('name')">
              <span>姓名</span>
               <span class="value">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-shang-copy-copy-copy"></use>
                </svg>
              </span>
              <span class=" valuespan">{{userInfo.name}}</span>
            
          </li>
    
          <li   @click="switchTarget('sex')">
              <span>性别</span>
              <span class="value">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-shang-copy-copy-copy"></use>
                </svg>
              </span>
              <span class=" valuespan">{{userInfo.sex}}</span>
    
          </li>

          <li   @click="switchTarget('datebirth')">
              <span>生日</span>
              <span class="value">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-shang-copy-copy-copy"></use>
                </svg>
              </span>
              <span class=" valuespan">{{userInfo.name}}</span>
          </li>
          <li   @click="switchTarget('provinces')">
              <span>现居城市</span>
              <span class="value">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-shang-copy-copy-copy"></use>
                </svg>
              </span>
              <span class=" valuespan">{{userInfo.name}}</span>
          </li>
          <li  @click="switchTarget('industry')">
              <span>从事行业</span>
              <span class="value">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-shang-copy-copy-copy"></use>
                </svg>
              </span>
              <span class=" valuespan">{{userInfo.name}}</span>
          </li>
          <li  @click="switchTarget('part')">
              <span>行业角色</span>
              <span class="value">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-shang-copy-copy-copy"></use>
                </svg>
              </span>
              <span class=" valuespan">{{userInfo.name}}</span>
          </li>
          <li  @click="switchTarget('tags')">
              <span>技能标签</span>
              <span class="value">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-shang-copy-copy-copy"></use>
                </svg>
              </span>
              <span class=" valuespan">{{userInfo.name}}</span>
          </li>
          <li  @click="switchTarget('phone')">
              <span>联系方式</span>
              <span class="value">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-shang-copy-copy-copy"></use>
                </svg>
              </span>
              <span class=" valuespan">{{userInfo.name}}</span>
          </li>
          <li>
            <router-link to="/user/invite/introduce">
              <span>项目展示</span>
              <span class="value">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-shang-copy-copy-copy"></use>
                </svg>
              </span>
              <span class=" valuespan">{{userInfo.name}}</span>
               </router-link>
          </li>
          <li>
            <router-link to="/user/invite/introduce">
              <span>资质证书</span>
              <span class="value">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-shang-copy-copy-copy"></use>
                </svg>
              </span>
              <span class=" valuespan">{{userInfo.name}}</span>
               </router-link>
          </li>
          <li>
            <router-link to="/user/security/cIndetificate">
              <span>实名认证</span>
              <span class="value">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-shang-copy-copy-copy"></use>
                </svg>
              </span>
              <span class=" valuespan">{{userInfo.name}}</span>
               </router-link>
          </li>
          
      </ul>

          <mt-popup   v-model="showModifyName" position="right">
           
              <div class="edit">
                <mt-header title="修改姓名" fixed>
                        <a is-link slot="left">
                        <mt-button icon="back"  @click="showModifyName=false"></mt-button>
                        </a> 
                  </mt-header> 
                  <div class="input">
                            <div class="input-number-2">
                                <input type="text" placeholder="请输入姓名" maxlength="10" v-model="userInfo.name"/>
                            </div>
                            <mt-button type="primary" size="large" @click="handleModifyUserInfo" class="next-step">确定</mt-button>
                    </div>
              </div>
          </mt-popup>

          <mt-popup   v-model="showModifySex" position="right">
           
              <div class="edit">
                <mt-header title="修改性别" fixed>
                        <a is-link slot="left">
                        <mt-button icon="back"  @click="showModifySex=false"></mt-button>
                        </a> 
                  </mt-header> 
                  <div class="input">
                            <div class="input-number-2">
                             <mt-radio 
  align="right" title="请选择性别" v-model="userInfo.sex"  :options="['男', '女']">
</mt-radio>
                            </div>
                            <mt-button type="primary" size="large" @click="handleModifyUserInfo" class="next-step">确定</mt-button>
                    </div>
              </div>
          </mt-popup>

          <mt-popup   v-model="showModifyDatebirth" position="right">
           
              <div class="edit">
                <mt-header title="修改生日" fixed>
                        <a is-link slot="left">
                        <mt-button icon="back"  @click="showModifySex=false"></mt-button>
                        </a> 
                  </mt-header> 
                  <div class="input">
                            <div class="input-number-2">
                                <input type="text" placeholder="请选择生日" maxlength="10" v-model="userInfo.atebirth" @click="openPicker"/>
                                     <mt-datetime-picker
                type="date"
                ref="picker"
                year-format="{value} 年"
                month-format="{value} 月"
                date-format="{value} 日"
                @confirm="handleConfirm"
             >
        </mt-datetime-picker>
                            </div>
                            <mt-button type="primary" size="large" @click="handleModifyUserInfo" class="next-step">确定</mt-button>
                    </div>
              </div>
          </mt-popup>
          <mt-popup   v-model="showModifyProvinces" position="right">
           
              <div class="edit">
                <mt-header title="修改现居城市" fixed>
                        <a is-link slot="left">
                        <mt-button icon="back"  @click="showModifyProvinces=false"></mt-button>
                        </a> 
                  </mt-header> 
                  <div class="input">
                            <div class="input-number-2">
                          
                            
                            </div>
                            <mt-button type="primary" size="large" @click="handleModifyUserInfo" class="next-step">确定</mt-button>
                    </div>
              </div>
          </mt-popup>
          <mt-popup   v-model="showModifyIndustry" position="right">
           
              <div class="edit">
                <mt-header title="修改从事行业" fixed>
                        <a is-link slot="left">
                        <mt-button icon="back"  @click="showModifyIndustry=false"></mt-button>
                        </a> 
                  </mt-header> 
                  <div class="input">
                            <div class="input-number-2">
                                <input type="text" placeholder="请选择从事行业" maxlength="10" v-model="userInfo.industry"/>
                            </div>
                            <mt-button type="primary" size="large" @click="handleModifyUserInfo" class="next-step">确定</mt-button>
                    </div>
              </div>
          </mt-popup>
          
          <mt-popup   v-model="showModifyPart" position="right">
           
              <div class="edit">
                <mt-header title="修改行业角色" fixed>
                        <a is-link slot="left">
                        <mt-button icon="back"  @click="showModifyPart=false"></mt-button>
                        </a> 
                  </mt-header> 
                  <div class="input">
                            <div class="input-number-2">
                                <input type="text" placeholder="请选择行业角色" maxlength="10" v-model="userInfo.industry"/>
                            </div>
                            <mt-button type="primary" size="large" @click="handleModifyUserInfo" class="next-step">确定</mt-button>
                    </div>
              </div>
          </mt-popup>
          <mt-popup   v-model="showModifyTags" position="right">
           
              <div class="edit">
                <mt-header title="修改技能标签" fixed>
                        <a is-link slot="left">
                        <mt-button icon="back"  @click="showModifyTags=false"></mt-button>
                        </a> 
                  </mt-header> 
                  <div class="input">
                            <div class="input-number-2">
                                <input type="text" placeholder="请选择技能标签" maxlength="10" v-model="userInfo.industry"/>
                            </div>
                            <mt-button type="primary" size="large" @click="handleModifyUserInfo" class="next-step">确定</mt-button>
                    </div>
              </div>
          </mt-popup>
          
          <mt-popup   v-model="showModifyPhone" position="right">
           
              <div class="edit">
                <mt-header title="修改联系方式" fixed>
                        <a is-link slot="left">
                        <mt-button icon="back"  @click="showModifyPhone=false"></mt-button>
                        </a> 
                  </mt-header> 
                  <div class="input">
                            <div class="input-number-2">
                                <input type="text" placeholder="请填写联系方式" maxlength="10" v-model="userInfo.phone"/>
                            </div>
                            <mt-button type="primary" size="large" @click="handleModifyUserInfo" class="next-step">确定</mt-button>
                    </div>
              </div>
          </mt-popup>
  </div>
</template>
<script>
import { Popup,Radio , DatetimePicker,MessageBox, Header } from "mint-ui";
import moment from 'moment'// 格式化时间
import {GetUserInedx } from "@/api/user/index";

export default {
  data() {
    return {
      centerTitle: "个人资料",
      userInfo:{},
      to:'/user',
      showModifyName:false,
      showModifySex:false,
      showModifyDatebirth:false,
      showModifyProvinces:false,
      showModifyIndustry:false,
      showModifyPart:false,
      showModifyTags:false,
      showModifyPhone:false,
    };
  },
  created() {
   GetUserInedx().then(res => {
          if (res.StatusCode === 200) {
            this.userInfo = res.Data.UserInfo;        
          }
        });
  },
  methods:{

    openPicker () {
        this.$refs.picker.open()
    },

    handleConfirm (data) {
      let date = moment(data).format('YYYY.MM.DD');
      console.log(date);
      this.showModifyDatebirth=false;
    },

    switchTarget(cmd){
    switch(cmd)
    {
      case "name":this.showModifyName=true;
      reak;
      case "sex":this.showModifySex=true;
      break;
      case "datebirth":this.showModifyDatebirth=true;break;
      case "provinces":this.showModifyProvinces=true;break;
      case "industry":this.showModifyIndustry=true;break;
      case "part":this.showModifyPart=true;break;
      case "tags":this.showModifyTags=true;break;
      case "phone":this.showModifyPhone=true;break;
    }
    },
    handleModifyUserInfo(){
      console.log(this.userInfo)
    }
  },
};
</script>

<style lang="scss" scoped>
.centerInfo {
  border-bottom: 353.59px solid #f4f4f4;
}
.headUsual {
  border-bottom: 10px solid #f4f4f4;
}
/* 信息列表 */
.info-list {
  margin-left: 12px;
  margin-right: 12px;
  font-size: 18px;
  > li {
    overflow: hidden;
    border-bottom: 1px solid #eeeeee; 
    padding: 15px 0;
    .edit-no {
      color: #fd4f00;
      
    }
    .value{
      float: right
    }
    .valuespan{
       float: right;
    }
    > a{
       width: 100%
    }
  }

}

// 设置弹出层参数
.mint-popup {
  width: 100%;
  height: 100%;
}

// 更改修改密码样式
.input {
  padding: 0 12px;
  margin-top: 67px;
  .input-number {
    border-color: #dcdcdc;
    margin-bottom: 0px;
  }
  .fenge {
    background: #cccccc;
    margin-right: 13px;
  }
  .input-number-2 {
    border-color: #dcdcdc;
    padding-top: 15px;
    padding-bottom: 15px;
    font-size: 14px;
    > input{
      width: 100%
    }
  }
  .get-yanzheng {
    font-size: 14px;
  }
  .input-number-2{
    padding-bottom: 0.417874rem;
    border-bottom: 0.024155rem solid #fd4f00;
    padding-left: 0.338164rem;
  }
  .mint-button {
    width: 200px;
    height: 44px;
    background: #fd4f00;
    position: absolute;
    bottom: 66px;
    left: 50%;
    margin-left: -100px;
  }
}

.input-number {
  border-color: #dcdcdc !important;
}
.input-number-2 {
  border-color: #dcdcdc !important;
}

// 设置头部
.mint-header {
  background: white;
  color: #282828;
  font-size: 18px;
  height: 52px;
  border-bottom: 1px solid #f4f4f4;
  a {
    display: block;
  }
}
</style>
